<template>
    <div class="home bfff">
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img class="w100p" :src="image" />
            </van-swipe-item>
        </van-swipe>
        <!-- 导航 -->
        <div class="reccomd fl fww ">
            <div v-for="(item, index) in reccomd" :key="item.categoryId" @click="goCategoy(item.categoryId)"
                class="reccomd-item fcc fdc">
                <img class="reccomd-img" :src="item.iconUrl" alt="">
                <span class="mt-10">{{ item.name }}</span>
            </div>

        </div>
        <!-- 秒杀\福利 -->
        <Grab />

        <!-- 商品 -->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ListHome :product="product" />
        </van-list>

        <div class="h50"></div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Sticky, Swipe, SwipeItem, List } from 'vant';
import ListHome from './children/list.vue';
import Grab from './children/grab.vue';
import request from '../../utils/request'
import { fetchCategoryAll, fetchProdcutList, fetchSWiper } from '../../api';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Sticky);
Vue.use(List);

export default {
    name: 'Home',
    data() {
        return {
            images: [],
            reccomd: [],
            product: [],
            loading: false,
            finished: false,
            currPage: 1,

        };
    },
    components: {
        ListHome,
        Grab
    },
    created() {
        this.swipeed();
        this.reccomded();
    },
    methods: {
        async swipeed() {
            try {
                let switchRes = await fetchSWiper();
                this.images = switchRes.banners;
            } catch (error) {
                console.log(error);
            }

        },
        async reccomded() {
            try {
                let reccomdRes = await fetchCategoryAll();
                this.reccomd = reccomdRes.list;
            } catch (error) {
                console.log(error);
            }
        },
        async onLoad() {
            // 开始加载，设置 loading 状态为 true
            this.loading = true;
            // console.log('请求了', this.currPage)
            if (this.currPage === 1) {
                try {
                    let params = {
                        currPage: this.currPage
                    };
                    let productRes = await fetchProdcutList(params);
                    this.product = productRes.list;
                    // 加载状态结束
                    this.loading = false;
                } catch (error) {
                    console.log(error);
                }
            } else {
                let params = {
                    currPage: this.currPage
                };
                let productRes = await fetchProdcutList(params);
                this.product = this.product.concat(productRes.list);
                // 加载状态结束
                this.loading = false;
                // 判断是否加载结束，当获取的列表长度等于0使加载结束
                if (productRes.list.length === 0) {
                    this.finished = true;
                }
            }
            this.currPage++;

        },
        goCategoy(id) {
            this.$router.push({ name: 'Category', params: { id } });
        }
    }
}
</script>

<style scoped lang="less">
.reccomd-item {
    width: 25%;
    height: 95px;
}

.reccomd-img {
    width: 45px;
    height: 45px;
}
</style>